<template>
  <el-popover trigger="click">
    <el-checkbox-group v-model="checkboxValue">
      <div v-for="item in checkboxData" :key="item.name">
        <el-checkbox :label="item.name" :checked="item.default">{{item.alias}}</el-checkbox>
      </div>
    </el-checkbox-group>
    <el-button slot="reference" class="filterCloumn"><i class="el-icon-menu"></i></el-button>
  </el-popover>
</template>

<script>
  export default {
    name: 'JTTableColumnFilter',
    data() {
      return {
        checkboxData: this.headerData,
        checkboxValue: [],
        jtTableKey: this.tableKey,
        jtFilterColumn: this.filterColumn,
        tableHeaderOption: [],
      };
    },
    props: {
      // 表格编号
      tableKey: {
        type: Number,
        required: true,
      },
      // 表格 header 内可以显示的列
      headerData: {
        type: Array,
        required: true
      },
      // 表格 body 内可以显示的列
      filterColumn: {
        type: Array,
        required: true,
      }
    },
    methods:{
      refresh(){
        for (var value of this.checkboxData) {
          this.tableHeaderOption.push(value.name); 
        }
      }
    },
    watch: {
      checkboxValue(valArr) {
        this.jtFilterColumn = this.tableHeaderOption.filter(i => valArr.indexOf(i) >= 0);
        this.jtTableKey = this.jtTableKey + 1;
        this.$emit('update:tableKey', this.jtTableKey);
        this.$emit('update:filterColumn', this.jtFilterColumn);
      },
      headerData(){
        this.checkboxData=this.headerData;
        this.refresh();
      }
    }, 
    mounted(){
      for (var value of this.checkboxData) {
          this.tableHeaderOption.push(value.name); 
        }
    }
  }
</script>

<style scoped>
  .el-checkbox+.el-checkbox {
    margin-left: 0px !important;
  }
  .filterCloumn{
    margin-bottom: 10px;
    padding: 5px 10px;
    font-size: 20px;
  }
</style>
